import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import style from './SideModal.less';

class SideModal extends React.Component {
  render() {
    const { visible } = this.props;
    return (
      <div
        className={classNames({
          [style.box]: true,
          [style.show]: visible,
        })}
      >
        <div className={style.mask} onClick={this.props.onClose} />
        <div className={style.body}>
          {
            this.props.children
          }
        </div>
      </div>
    );
  }
}

SideModal.propTypes = {
  visible: PropTypes.bool,
  onClose: PropTypes.func,
};

SideModal.defaultProps = {
  onClose: () => null,
};

export default SideModal;
